<template>
  <el-row :gutter="24">
    <el-col :span="8" style="margin-top: 20px">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImag" />
          <div class="user-info">
            <p class="userName">妞妞</p>
            <p>超级管理猿</p>
          </div>
        </div>
        <div class="login-info">
          <hr />
          <p><span>上次登录时间：</span>2021-7-19</p>
          <p><span>上次登录地点：</span>江西</p>
        </div>
      </el-card>
      <el-card shadow="hover" style="margin-top: 20px">
        <el-table :data="tableData">
          <el-table-column
            v-for="(val, key) in tableLabel"
            :key="key"
            :prop="key"
            :label="val"
          >
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>

    <el-col :span="16" style="margin-top: 20px">
      <div class="order-info">
        <el-card v-for="item in countData" :key="item.name">
          <i
            class="icon"
            :class="'el-icon-' + item.icon"
            :style="{ background: item.color }"
          ></i>
          <div class="detail">
            <p class="numtext">￥{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
    </el-col>

    <el-col :span="16" style="margin-top: 20px">
      <el-card>
        <comcharts :chartData="echartData.line" style="height: 250px" />
      </el-card>
      <div class="graph">
        <el-card>
          <comcharts :chartData="echartData.user" style="height: 250px" />
        </el-card>
        <el-card>
          <comcharts :chartData="echartData.pie" :isAxisChart="false" style="height: 250px" />
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { getHomeData } from "../../../api/data.js";
// import * as echarts from "echarts";
import comcharts from "../../components/Echarts.vue";

export default {
  data() {
    return {
      userImag: require("../../assets/images/kexuan.png"), //上上级目录（../../）
      tableData: [],
      tableLabel: {
        name: "品牌",
        todayBuy: "日销售量",
        monthBuy: "月销售量",
        totalBuy: "总销售量",
      },
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
      echartData: {
        line: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        pie: {
          series: [],
        },
      },
    };
  },
  components: {
    comcharts,
  },

  mounted() {
    getHomeData().then((responce) => {
      const { code, data } = responce.data;
      //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。可以使用箭头函数，箭头函数与父级共享变量
      if (code === 20000) {
        this.tableData = data.tableData;
        const order = data.orderData; //图表的数据都在这里
        const xData = order.date;
        const keyArray = Object.keys(order.data[0]); //返回key值组成的数组
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            //map() 方法返回一个新数组，数组中的元素为 原始数组元素 调用函数处理后的值。
            type: "line",
          });
        });

        // const option = {
        //   xAxis: {
        //     data: xData,
        //   },
        //   yAxis: {},
        //   legend: {
        //     data: keyArray,
        //   },
        //   series: series,
        //   tooltip: {},
        // };

        this.echartData.line.xData = xData;
        this.echartData.line.series = series;
        // const A = echarts.init(this.$refs.echarts);
        // A.setOption(option);

        // const userOption = {
        //   legend: {
        //     textStyle: {
        //       color: "#333",
        //     },
        //   },
        //   grid: {
        //     left: "10%",
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //   },
        //   xAxis: {
        //     type: "category",
        //     data: data.userData.map((data) => data.date),
        //   },
        //   yAxis: {},
        //   series: [
        //     {
        //       type: "bar",
        //       data: data.userData.map((data) => data.new),
        //       name: "新用户",
        //     },
        //     {
        //       type: "bar",
        //       data: data.userData.map((data) => data.active),
        //       name: "活跃用户",
        //     },
        //   ],
        // };
        this.echartData.user.xData = data.userData.map((data) => data.date);
        this.echartData.user.series = [
          {
            type: "bar",
            data: data.userData.map((data) => data.new),
            name: "新用户",
          },
          {
            type: "bar",
            data: data.userData.map((data) => data.active),
            name: "活跃用户",
          },
        ];
        // const B = echarts.init(this.$refs.userecharts);
        // B.setOption(userOption);
        // B.resize({
        //   //设置图表大小
        //   width: 500,
        //   height: 200,
        // });
        //   const videooption = {
        //     series: [
        //       {
        //         type: "pie",
        //         data: data.videoData,
        //         roseType: "area",
        //       },
        //     ],
        //   };
        //   const C = echarts.init(this.$refs.videoecharts);
        //   C.setOption(videooption);
        //   C.resize({
        //     //设置图表大小
        //     width: 500,
        //     height: 200,
        //   });
        // });
        this.echartData.pie.series = [
          {
            type: "pie",
            data: data.videoData,
            roseType: "area",
          },
        ];
      }
    });
  },
};
</script>
<style lang="less" scoped>
.user {
  display: flex;
  justify-content: space-between;
  align-items: center; //子元素居中
  img {
    height: 150px;
    width: 150px;
    border-radius: 50%;
  }
  .user-info {
    .userName {
      text-align: center;
      font-weight: bolder;
    }
  }
}

.order-info {
  display: flex;
  justify-content: space-between;
  .el-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    .icon {
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 40px;
      color: aliceblue;
    }
    .detail {
      display: flex;
      flex-direction: column;
      align-items: center;
      .numtext {
        font-size: 15px;
      }
      .txt {
        text-align: center;
        font-size: 8px;
      }
    }
  }
}

.graph {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-card {
    width: 49%;
  }
  margin-top: 20px;
}
</style>